<template>
  <div class="_page">
    <div class="cnt">
	  <div class="left">
		<img :src="previewUrl + settingStore.contractInfo.imgurl" alt="" srcset="">
	  </div>
	  <div class="right">
		<h1>HEAD OFFICE</h1>
		<h2>SIMPSON MARINE</h2>
		<p>
			{{ settingStore.contractInfo.location || '' }}
		</p>
		<span> T:{{ settingStore.contractInfo.phone || '' }}</span>
		<span> E:{{ settingStore.contractInfo.email || '' }}</span>

		<div class="imgs">
			<img src="@/assets/images/others/contact1.png" alt="" srcset="">
			<img src="@/assets/images/others/contact2.png" alt="" srcset="">
			<img src="@/assets/images/others/contact3.png" alt="" srcset="">
			<img src="@/assets/images/others/contact4.png" alt="" srcset="">
			<img src="@/assets/images/others/contact5.png" alt="" srcset="">
		</div>
	  </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { ref, onMounted } from 'vue'
import { adviseGetAll } from '@/api/website/advise'
import echarts from '@/components/echarts'
import { useSettingStore } from '@/store/modules/setting'
let settingStore = useSettingStore()

const previewUrl = ref(import.meta.env.VITE_IMG_SERVE)

let userStore = useUserStore()

onMounted(() => {
	getAdvise()
})

let advices = ref([{
	img: '',
	model: 'model 001',
	desc: 'desc'
}])
const getAdvise = async () => {
	try{
		let { data } = await adviseGetAll()
		
	}catch(e){
		//TODO handle the exception
	}
}
</script>

<style lang="scss" scoped>
$same_color: $theme-primary;
._page {
}
.cnt {
  /* width: 50%; */
  /* min-width: 600px; */
  display: flex;
  padding: 80px;
  flex-wrap: wrap;
  width: fit-content;
	background-image: url('@/assets/images/others/contactus.png');
	background-size: contain;
	background-repeat: repeat-y;
	background-position: 100% 0;

	.left {
		width: 600px;
		height: 500px;
		
		img {
			width: 100%;
			height: 100%;
		}
	}
	.right {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-left: 100px;
		line-height: 1.67;

		h1 {
			font-size: 2rem;
			margin: 0;
		}

		h2 {
			color: $theme-primary;
			border-bottom: 1px solid $theme-primary;
			margin: 0;
		}

		p {
			white-space: pre-line;
			margin-bottom: 20px;
		}

		span {
			color: $theme-primary;
		}

		.imgs {
			display: flex;
			margin-top: 10px;
			img {
				display: block;
				width: 40px;
				height: 40px;
				margin: 0 10px;
				
				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}


@media (max-width: 768px) { 
	.cnt {
		display: block;
		padding: 0;
		width: 100%;

		.left {
			width: 100%;
		}

		.right {
			margin-left: 0;
		}
	}
}
</style>